<template>
  <pre>{{ JSON.stringify(xxx, null, 2) }}</pre>
  <v-chart class="chart" :option="xxx" autoresize />
</template>

<script setup>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart, BarChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, provide } from 'vue';

use([
  CanvasRenderer,
  PieChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

// provide(THEME_KEY, 'dark');

const option = ref({
  title: {
    text: 'Traffic Sources',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
  },
  series: [
    {
      name: 'Traffic Sources',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { value: 335, name: 'Direct' },
        { value: 310, name: 'Email' },
        { value: 234, name: 'Ad Networks' },
        { value: 135, name: 'Video Ads' },
        { value: 1548, name: 'Search Engines' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
});

const xxx = ref({
  xAxis: { type: 'category' }, // 必须补充轴配置
  yAxis: { type: 'value' },
  dataset: {
    "source": [
      [
        "日期",
        "销售量"
      ],
      [
        "1月1日",
        13
      ],
      [
        "1月2日",
        23
      ],
      [
        "1月3日",
        23
      ],
      [
        "1月4日",
        43
      ],
      [
        "1月5日",
        18
      ],
      [
        "1月6日",
        73
      ]
    ]
  },
  "series": [
    {
      "type": "bar",
      encode: { x: '日期', y: '销售量' },  // 绑定数据集字段
    }
  ]
})
</script>

<style scoped>
.chart {
  height: 100vh;
}
</style>
